<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <!-- <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css"> -->
    <script src="http://47.104.254.28/commonfile/js/js/swiper/swiper.min.js"></script>
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/swiper.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script> -->

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        p {
            margin: 0;
            padding: 0;
            border: 0;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .page {
            background: #fff;
            overflow-x:hidden ;
        }

        .barFlex {
            display: flex;
            justify-content: space-between;
            line-height: 2.2rem;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 444;
        }

        .topVidoe {
            width: 100%;
            height: 8.85rem;
            z-index: 13;
            background-color: rgb(61, 34, 89);
            border: 0.05rem solid rgb(61, 34, 89);
            font-size: 0.7rem;
            margin-top: 2.2rem;
            position: relative;
        }
        .topOut{
            width: 100% ;
        }
        .dec_img{
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8.85rem;
            display: block;
        }

        .topFont {
            z-index: 3333 ;
            width: calc(100% - 60px);
            margin: 1.8rem 1.5rem 0.6rem;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #f2f2f2;
            position: absolute;
            top: 1rem;
        }

        .topClick {
            width: 5.9rem;
            height: 2rem;
            z-index: 15;
            background-color: rgba(255, 0, 0, 0);
            border: 0.05rem solid rgb(55, 193, 124);
            color: rgb(55, 193, 124);
            border-radius: 0.2rem;
            font-size: 0.7rem;
            text-align: center;
            line-height: 2rem;
            position: absolute;
            left: 50%;
            transform: translate(-50%);
        }

        .active {
            color: #0e0e0e !important;
            font-weight: 700;
        }

        /*课程*/
        /*课程tab*/
        .tab-link {
            height: 2.5rem !important;
            line-height: 2.5rem !important;
            border: none !important;
        }

        .active > text {
            border-bottom: 0.2rem solid #58a784;
            padding-bottom: 0.7rem;
        }

        /*课程title*/
        .courseTitleOut {
            height: 5.45rem;
        }

        .courseTitle {
            font-size: 0.9rem;
            color: rgb(16, 16, 16);
            padding: 1.5rem 0 0.3rem 0;
        }

        .content-block {
            background: #fff !important;
            margin: 0 !important;
            padding: 0;
            overflow-x: hidden;
        }

        .xingPic > img {
            width: 0.8rem;
            height: 0.8rem;
        }

        /*课程介绍*/
        .suggest {
            border-top: 0.4rem solid #f8f8f8;
        }

        /*讲师、*/
        .courseTeacher {
            margin-top: 1rem;
            margin-left: 1rem;
        }

        .teacherPicOut {
            display: flex;
            justify-content: left;
            align-items: center;
            padding: 1rem 0;
        }

        .teacherPic {
            margin-right: 1.5rem;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 1px solid #f2f2f2;
        }

        .tab2Tab {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 1.7rem;
            line-height: 1.7rem;
            text-align: center;
            background: #f8f9fd;
            padding: 1.5rem 0.5rem;
        }

        .tabLsit {
            border: 1px solid #2bb32a;
            flex: 1;
            margin-right: 3px;
            background: #fff;
            color: #2bb32a;
            font-weight: 400;
            border-radius: 0.2rem;
        }

        .tab2Tab :last-child {
            margin: 0;
        }

        body, .page {
            background: #f2f2f2;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .contain {
            display: flex;
            justify-content: space-around;
            padding: 1rem 0.5rem 0.5rem;
            background: #fff;
        }

        .listBorder {
            border: 1px solid #666;
            line-height: 1rem;
            min-width: 2rem;
            height: 1rem;
            font-size: 0.7rem;
            text-align: center;
            margin: 0 0.4rem;
        }

        .listLfet {
            font-size: 0.8rem;
        }

        .listTime {
            font-size: 0.6rem;
        }

        .red {
            color: #37c17c;
        }

        .red > .listBorder {
            border: 1px solid #37c17c;
            background: #e1fcef;
        }

        .red > .listLfet > .listTime {
            color: #7bd6a8;
        }

        /*评价*/
        .myEvaluate {
            padding: 0.5rem;
            text-align: center;
            border-bottom: 0.4rem solid #f2f2f2;
        }

        .myEvaluateH1 {
            font-size: 0.8rem;
            font-weight: 700;
            text-align: left;
            margin-bottom: 0.4rem;
        }

        /*星星*/
        .starts ul {
            width: 100%;
            margin: 0;
        }

        .starts ul li {
            margin: 0;
            padding: 0;
            width: 1.2rem;
            height: 1.2rem;
            background: url(http://47.104.254.28/commonfile/img/img/xingxingn.png) no-repeat;
            background-size: 100%;
            display: inline-block;
        }

        .starts ul li.on {
            width: 1.2rem;
            height: 1.2rem;
            display: inline-block;
            background: url(http://47.104.254.28/commonfile/img/img/xingxing.png) no-repeat;
            background-size: 100%;
        }

        .allEvaluate {
            padding: 0.5rem;
        }

        .startsTiele {
            font-size: 0.6rem;
            color: rgba(166, 164, 164, 1);
        }

        .allStart {
            margin-top: 1rem;
            display: flex;
        }

        .fontSizebig {
            font-size: 2.5rem;
            color: #000;
            font-weight: 700;
            position: relative;
        }
        .textPostion{
            position: absolute;
            bottom: 1rem;
        }

        .allStartLsit {
            border-top: 1px solid #f2f2f2;
        }

        .itemFlex {
            display: flex;
            justify-content: space-between;
            padding: 1rem 0;
        }

        .itemPic {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            border: 1px solid #f2f2f2;
        }

        .itemFont {
            flex: 1;
        }

        .itemFont1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 0.6rem;
        }

        .itemLeftTop {
            width: 6rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.7rem;
            color: rgb(91, 91, 91);
        }

        .itemLeftBom {
            font-size: 0.6rem;
            color: rgb(166, 164, 164);
        }

        .itemCneter {
            width: 12rem;
            margin-top: 0.2rem;
            font-size: 0.7rem;
            color: rgb(91, 91, 91);
            padding-left: 0.6rem;
        }

        .startsXIn {
            display: flex;
            justify-content: right;
            align-items: center;
            margin-bottom: 0.2rem;
        }

        .startsXIn > img {
            width: 0.7rem;
            height: 0.7rem;
        }

        .spanStart {
            width: 7.5rem;
            height: 0.2rem;
            background: #f2f2f2;
            margin-left: 0.4rem;
            border-radius: 0.2rem;
        }
        .butnStart{
            position: fixed;
            right: 0;
            bottom: 5rem;
            width: 5rem;
            height: 2rem;
            line-height: 2rem;
            background: #00A9F2;
            text-align: center;
            border-radius: 0.5rem;
            z-index: 33;
        }
        .startInput{
            position: fixed;
            bottom: 0;
            width: 18.75rem;
            border: 1px solid #f2f2f2;
            height: 2rem;
        }
        .staOut{
            position: relative;
            width:7.5rem
        }
        .btn_sou{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 4rem;
            height: 2rem;
            line-height: 2rem;
            background: #00A9F2;
            text-align: center;
            border-radius: 0.5rem;
            z-index: 33;
            border: none;
        }
        .btHide{
            display: none;
        }
        .itemLeftTop1{
            width: 4rem;
        }
        .tab2Class{
            color: #000;
        }


    </style>
</head>
<body>
<div class="page">
    <div class="content" infinite-scroll infinite-scroll-bottom data-distance='100'>
        <!--        顶部-->
        <header class="bar bar-nav barFlex" style="background: #fff">
            <div class="lfetDiv"><span class="icon icon-left "></span></div>
            <div><span>课程详情</span></div>
            <div class="rightDiv"><span class="icon icon-download"></span></div>
        </header>
        <!--        视频位置-->
        <div class="topVidoe">

            <!--            <div class="topFont">最近学到：获取的课程标题</div>-->
            <!--            <div class="topClick">进入学习</div>-->
        </div>
        <!--        tab标签、-->
        <div class="content1">
            <div class="buttons-tab">
                <a href="#tab1" class="tab-link active button">
                    <text>课程</text>
                </a>
                <a href="#tab2" class="tab-link button tab2List">
                    <text>目录</text>
                </a>
                <a href="#tab3" class="tab-link button">
                    <text>评价</text>
                </a>
            </div>
            <div class="content-block">
                <div class="tabs">
                    <div id="tab1" class="tab active"></div>
                    <div id="tab2" class="tab">
                        <div class="tab2Tab">
                            <div class="tabLsit1 tabLsit tab2Class" id="">全部</div>
                            <div class="tabLsit2 tabLsit" id="3">视频</div>
                            <div class="tabLsit3 tabLsit" id="1">直播</div>
                            <div class="tabLsit4 tabLsit" id="2">回放</div>
                        </div>
                        <div class="tabListAll"></div>
                    </div>
                    <div id="tab3" class="tab">
                        <div class="butnStart"> 评论</div>
                        <div class="btHide">
                            <input id="input_text1" type="text" value="" placeholder="请输入评论内容"  class="startInput">
                            <button class="btn_sou">发送</button>
                        </div>
                        <div class="myEvaluate">
                            <div class="myEvaluateH1">我的评价</div>
                            <div class="starts">
                                <ul id="pingStar">
                                    <li rel="1"></li>
                                    <li rel="2"></li>
                                    <li rel="3"></li>
                                    <li rel="4"></li>
                                    <li rel="5"></li>
                                    <span id="dir"></span>
                                </ul>
                                <input type="hidden" value="" id="startP"/>
                            </div>
                            <div class="startsTiele">您的宝贵评价，对我们非常重要</div>
                        </div>
                        <div class="allEvaluate">
                            <div myEvaluateH1>全部评价</div>
                            <div class="allStart"> </div>
                            <div class="allStartLsit"> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
    </div>
</div>
</body>
<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ = jQuery.noConflict();</script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script>

<script type="text/javascript">
    let loading = false;
    let itemsPerLoad = 10;
    let scoll = true;
    let timers = null;
    let Allid = '';
    let subject_id = '14';
    let user_id ='33';
    let id = '';
    let arrlength = 0;
    //返回 按钮
    $('.lfetDiv').on('click',function () {
        console.log('返回按钮');
        native_goto("local/finish");
    })
    //点击缓存管理跳转函数
    $('.rightDiv').on('click',function () {
        console.log('缓存管理');
        native_goto('local/tab1_zhibocache');
    })
    $('.tab').on('click',function () {
        $('.itemLi').remove();
        $('.itemFlex').remove();
        arrlength = 0;
        getCourseDetails();
        getLiveLsit();
        getStartList();
    })
    //	调接口  需要接收的参数userid  subjectid
    function getParams(data) {
        // 		data需要转成json调用 ，函数urlParamParseJson();
        var jsonData = urlParamParseJson(data);
        subject_id = jsonData.subject_id; // 课程id
        user_id = jsonData.user_id; //用户id
        $('.itemLi').remove();
        $('.itemFlex').remove();
        arrlength = 0;
        setTimeout(()=>{
            getCourseDetails();
            getLiveLsit();
            getStartList();
        },0 )
    }
    let btnHide = true;
    //点击切换全部
    $('.tab2Tab').on('click', '.tabLsit', function (e) {
        id =  e.currentTarget.id;
        $('.itemLi').remove();
        $('.itemFlex').remove();
        $(this).addClass('tab2Class').siblings().removeClass('tab2Class');
        arrlength = 0;
        getLiveLsit()
    });
    //点击选中单条数据
    $('.tabListAll').on('click', '.contain', function (e) {
        let cid = e.currentTarget.dataset.id;
        $(this).addClass('red').siblings().removeClass('red')//去除其他项的高亮形式
        native_goto('local/tab1_zhibo_tolive?subdir_id='+cid);

    });

    $('.butnStart').on('click',function () {
        if(btnHide){
            $('.btHide').css('display','block');
            btnHide = false;
        }else{
            $('.btHide').css('display','none');
            btnHide = true
        }
    })
    $(".btn_sou").click(function(){
        let result1 = $("#input_text1").val();
        let score = document.getElementById("startP").value;
        $('.contain').remove();
        if(result1 == ''){
            console.log('不能为空');
            $.toast('输入文字不能为空')
        }else if( score < 1 ){
            $.toast('未选择星级')
        } else{
            net_request('get', 'api/v1/addSubComment',
                {
                    subject_id: subject_id,
                    user_id:user_id,
                    contents : result1,score
                }, (res) => {
                console.log(res);
                if(res.success){
                    $('.btHide').css('display','none');
                    btnHide = true;
                    getStartList();
                }
            },(err) => {
                console.log(err)
            })
        }
        console.log(result1)
    });
    //頁面加載後請求接口
    $(document).ready(function () {
        $('.itemLi').remove();
        $('.itemFlex').remove();
        arrlength = 0;
        getCourseDetails();
        getLiveLsit();
        getStartList();
    });
    $('.content').scroll(function() {
        if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight ) {
            clearTimeout(timers);
            timers = setTimeout(function() {
                if(scoll1){
                    console.log('下12312拉');
                    getLiveLsit();
                }else{
                    getStartList();
                }
            }, 300);
        }
    });
    //获取评论
    function getStartList() {
        net_request('get', 'api/v1/subcomment',
            {
                subject_id: subject_id,
                user_id:user_id,
                offset: $('.itemFlex').length ,
                limit: itemsPerLoad,
            }, (res) => {
            console.log($('.itemFlex').length );
            res.data.data.map( item => {
                item.comment_at = item.comment_at.substr(0,10)
            })
            let data = res.data;
            let html = '';
            let allStart = '';
            let allStartNum = data.count5 +data.count4 +data.count3+data.count2+data.count1;
            let count5 =  data.count5 / Number( allStartNum) * 100;
            let count4 = data.count4 / Number( allStartNum) * 100;
            let count3 = data.count3 / Number( allStartNum) * 100;
            let count2 = data.count2 / Number( allStartNum) * 100;
            let count1 = data.count1 / Number( allStartNum) * 100;

            allStart += `
                   <div class="fontSizebig">
                        ${data.average_count}<text class="textPostion" style="font-size: 0.8rem">星</text>
                   </div>
                   <div>
                        <div class="startsX">
                            <div class="startsXOut">
                            <div class="startsXIn">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <div class="staOut">
                            <span class="spanStart" style="position: absolute;"></span>
                            <span class="spanStart spanStart1" style="background:#8f8e94;width:${ count5}%;position: absolute;z-index:11; "></span>
</div>
</div>                            <div class="startsXIn" style="margin-left:0.7rem;">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                              <div class="staOut">
                            <span class="spanStart" style="position: absolute;"></span>
                            <span class="spanStart spanStart1" style="background:#8f8e94;width: ${count4}%;position: absolute;z-index:11; "></span>
</div>
</div> <div class="startsXIn" style="margin-left:1.4rem;">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                              <div class="staOut">
                            <span class="spanStart" style="position: absolute;"></span>
                            <span class="spanStart spanStart1" style="background:#8f8e94;width: ${count3}%;position: absolute;z-index:11; "></span>
</div>
</div><div class="startsXIn" style="margin-left:2.1rem;">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                             <div class="staOut">
                            <span class="spanStart" style="position: absolute;"></span>
                            <span class="spanStart spanStart1" style="background:#8f8e94;width: ${count2}%;position: absolute;z-index:11; "></span>
</div>
</div><div class="startsXIn" style="margin-left:2.8rem;">
                            <img src="http://47.104.254.28/commonfile/img/img/xingxingn.png" alt="">
                             <div class="staOut">
                            <span class="spanStart" style="position: absolute;"></span>
                            <span class="spanStart spanStart1" style="background:#8f8e94;width: ${count1}%;position: absolute;z-index:11; "></span>
</div>
</div>

</div>
                        </div>
                   </div>`;
            if (data.data.length > 0) {
                for (let i = 0; i < data.data.length; i++) {
                    html += `
                   <div class="itemFlex">
                        <div class="itemPic">
                        <img class="itemPic" src="data.data[i].user.avatar_url" alt="">
</div>
                        <div class="itemFont">
                            <div class="itemFont1">
                                <div class="itemLeft">
                                    <div class="itemLeftTop">${data.data[i].user.nickname}</div>
                                    <div class="itemLeftBom"> &nbsp;</div>
<!--                                    ${data.data[i].user.last_login_time}-->
                                </div>
                                <div>
                                    <div class="itemLeftTop">
                                    <img class="itemLeftTop1" src="http://47.104.254.28/commonfile/img/img/${data.data[i].score}.png" alt="">
</div>
                                    <div class="itemLeftBom" style="margin-top: 0.2rem;">${data.data[i].comment_at}</div>
                                </div>
                            </div>
                            <div class="itemCneter">${data.data[i].content}</div>
                        </div>
                    </div>
               `
                }
                $('.allStartLsit').append(html);
                if (res.data.data.length < itemsPerLoad) {
                    scoll = false;
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                }
            } else {
                scoll = false;
                html += ` <div class="contain">暂无数据</div>`
            }
                $('.allStart').html(allStart);
        }, (err) => {
            console.log(err);
        })

    };

    // 星星
    window.onload = function () {
        let s = document.getElementById("pingStar");
        let m = document.getElementById("dir");
        let n = s.getElementsByTagName("li");
        let input = document.getElementById("startP");//保存所选值
        clearAll = function () {
            for (var i = 0; i < n.length; i++) {
                n[i].className = "";
            }
        }
        for (var i = 0; i < n.length; i++) {
            n[i].onclick = function () {
                var q = this.getAttribute("rel");
                clearAll();
                input.value = q;
                for (var i = 0; i < q; i++) {
                    n[i].className = "on";
                }
                m.innerHTML = this.getAttribute("title");
            }
            n[i].onmouseover = function () {
                var q = this.getAttribute("rel");
                clearAll();
                for (var i = 0; i < q; i++) {
                    n[i].className = "on";
                }
                m.innerHTML = this.getAttribute("title");
            }
            n[i].onmouseout = function () {
                clearAll();
                for (var i = 0; i < input.value; i++) {
                    n[i].className = "on";
                }

            }
        }
    }


    //获取目录列表
    function getLiveLsit() {
        net_request('get', 'api/v1/subdir', {
            subject_id: subject_id,
            status: id,
            offset: arrlength,
            limit: itemsPerLoad,
        }, (res) => {
            res.data.map(item => {
                if (item.status == 0) {
                    item.status = '未开播 '
                } else if (item.status == 1) {
                    item.status = '正在直播 '
                } else if (item.status == 2) {
                    item.status = '回放 '
                } else if (item.status == 3) {
                    item.status = '视频 '
                }
                ;
            });
            let data = res.data;
            let html = '';
            if(arrlength == 0){
                $('.tabListAll').html("");
            }
            if (data.length > 0) {
                arrlength = $('.itemLi').length;
                for (let i = 0; i < data.length; i++) {
                    html += `
                    <div class="itemLi">
                                      <div class="contain" data-id="${data[i].id}">
                    <div class="listBorder">${data[i].status}</div>
                    <div class="listLfet" style="flex: 1">
                        <div class="listTitle">${data[i].title}</div>
                        <div class="listTime" style="margin-top: 0.2rem;">
                            <text style="">[${data[i].status}]</text>
                            <text>开始时间：${data[i].start_time}</text>
                            <div style="margin-left:1.8rem">结束时间：${data[i].updated_at}</div>
                        </div>
                    </div>
                </div>
</div>
               `
                }
                $('.tabListAll').append(html);
                $('.infinite-scroll-preloader').remove();
                $.refreshScroller();
                if (data.length < itemsPerLoad) {
                    scoll1 = false;
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                }
            } else {
                html += ` <div class="itemLi contain">暂无数据</div>`
                $('.tabListAll').html(html);
            }

        }, (err) => {
            console.log(err);
        })

    };

    //获取课程详情
    function getCourseDetails() {
        net_request('get', 'api/v1/subject', {id: subject_id}, (res) => {
            let data = res.data[0];
            let html = '';
            let title = '';
            let xingPic = '';
            let courseTeacher = '';
            html += `<div class="topOut">
                    <div class="topFont"> 最近学到：${data.title}</div>
                     <img src="${data.dec_img}" alt="" class="dec_img">
                     </div>

<!--<div class="topClick">进入学习</div>-->
`;
            for (let i = 0; i < data.score; i++) {
                xingPic += `<img src="http://47.104.254.28/commonfile/img/img/xingxing.png" alt="">`
            }
            for (let i = 0; i < data.subdir.length; i++) {
                courseTeacher += `
                    <div class="teacherPicOut">
                        <img class="teacherPic" src="${data.subdir[i].teacher_user.avatar_url}"></img>
                        <text style="font-size: 0.7rem;font-weight: 400" >${data.subdir[i].teacher_user.nickname}</text>
                    </div>
                    `
            }
            title += `
            <div>
                <div class="courseTitleOut" style="padding: 0 1rem;">
                    <div class="courseTitle" style="font-weight: 700">${data.title}</div>
                        <div>
                            <div class="xingPic" style="display: inline-block"></div>
                            <text style="font-weight: 400">${data.score}</text>
                    </div>
                </div>
                <div class="suggest">
                    ${data.detail}
                </div>
                <div class="courseTeacher">
                    <div>讲师</div>
                    ${courseTeacher}
                </div>
            </div>
             `;
            $('.topVidoe').html(html);
            $('#tab1').html(title);
            $('.xingPic').html(xingPic);
            console.log(res, '成功')
        }, (err) => {
            console.log(err, '失败')
        })

    };

</script>
</html>